/******************** 变量 ********************/
$lv-notification-title-color: $text-color !default;
$lv-notification-content-color: $text-color-secondary !default;
$lv-notification-width: 3.6rem;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-notification {
  position: relative;
  display: flex;
  justify-content: center;
  color: $text-color;
  font-weight: $font-weight-regular;
  font-size: $font-size-base;
  line-height: $line-height-coeff;

  > .lv-notification-wrapper {
    width: $lv-notification-width;
    padding: $padding-md;
    @include panel-notification-style;

    > .lv-notification-title {
      display: flex;
      align-items: center;
      height: $height-sm;
      margin-bottom: 0.02rem;
      color: $lv-notification-title-color;
      font-weight: $font-weight-bold;
      font-size: $font-size-base;
      line-height: $line-height-lg;

      > i {
        width: $icon-size-md;
        height: $icon-size-md;
        margin-right: $margin-sm;
      }
    }

    > .lv-notification-content {
      color: $lv-notification-content-color;
    }

    > .lv-notification-title + .lv-notification-content {
      margin-top: $margin-sm;
    }

    > .lv-notification-content-indent {
      padding-left: $padding-xl;
    }

    > .lv-notification-close-button {
      position: absolute;
      top: 0.2rem;
      right: 0.16rem;
      line-height: 0;
      @include motion-state;
    }
  }
}

.lv-notification-container {
  z-index: $zindex-notification;
}

.lv-notification-container-topLeft,
.lv-notification-container-topRight {
  top: 0.48rem;

  .lv-notification {
    margin-top: $margin-md;
  }
}

.lv-notification-container-topLeft {
  left: 0.32rem;
}

.lv-notification-container-topRight {
  right: 0.32rem;
}

.lv-notification-container-bottomLeft,
.lv-notification-container-bottomRight {
  bottom: 0.32rem;

  .lv-notification {
    margin-top: $margin-xl;
  }
}

.lv-notification-container-bottomLeft {
  left: 0.32rem;
}

.lv-notification-container-bottomRight {
  right: 0.32rem;
}
